<template>
  <div class="search-page" style="padding: 5px 10px">
    <!--Move Account to exist group-->
    <el-dialog
      class="moveTo-outer"
      :title="$t('groupSearchResult.MoveToGroup')"
      :visible.sync="moveToOuterVisible"
      width="40%">
      <!--<myInput :options="inputOptions" v-model="inputVal" @change="inputChange"-->
      <!--@createNewGroup="createNewGroup"></myInput>-->
      <el-row>
        <el-col :span="12">
          <div class="move-input" v-clickoutside="handleClickOutSide">
            <el-input
              v-model="inputVal"
              :placeholder="$t('groupSearchResult.InputGroupName2')"
              @keyup.native="loadInput(inputVal)"
              @focus="moveInputFocus">
              <i slot="suffix" class="el-input__icon el-icon-close clear-icon" @click.stop="clearInputValue"></i>
            </el-input>
            <div v-show="dropDownShow" class="dropDownBox">
              <el-scrollbar>
                <div class="tab">
                  <ul style="margin: 0;padding: 0">
                    <li
                      class="tab-item"
                      v-for="(item,index) in inputOptions"
                      :key="item"
                      @click.stop="handleCheckedValuesChange(item)"
                    >{{item}}
                    </li>
                  </ul>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <p class="waringBox" v-show="moveToWarning">{{moveToWarningText}}</p>
        </el-col>
      </el-row>
      <div class="createBox">
        <a href="javascript:;" @click="createNewGroup">{{$t('groupSearchResult.CreateANewGroup')}}</a>
      </div>
      <!--<el-dialog-->
      <!--width="50%"-->
      <!--title="内层 exist group"-->
      <!--:visible.sync="newGroupExistVisible"-->
      <!--center-->
      <!--append-to-body>-->
      <!--<span>Group Name</span>-->
      <!--<el-input v-model="existGroupName">-->

      <!--</el-input>-->
      <!--<span style="color: red">{{inputVal}} has already existed</span>-->
      <!--<span slot="footer" class="dialog-footer">-->
      <!--<el-button type="primary" @click="handleNewGroupExistMoveTo">Move to exist Group</el-button>-->
      <!--<el-button type="primary" @click="handleNewGroupExistRename">Back to Rename</el-button>-->
      <!--</span>-->
      <!--</el-dialog>-->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleMoveToOuterSubmit">{{$t("groupSearchResult.Submit")}}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="moveTo-inner"
      width="30%"
      :visible.sync="moveToInnerVisible">
      <div class="innerBox" style="text-align: center">
        <i class="el-icon-warning"></i>
        <span>{{$t("groupSearchResult.MoveToGroup")}} {{inputVal}} ?</span>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleMoveToInnerCancel">{{$t("groupSearchResult.Cancel")}}</el-button>
          <el-button type="primary"
                     @click="handleMoveToInnerConfirm"
                     :loading="loading.moveToLoading">{{$t("groupSearchResult.Confirm")}}</el-button>
        </span>
    </el-dialog>
    <!--<el-dialog-->
    <!--width="40%"-->
    <!--class="newGroup-inner-one"-->
    <!--title="Create a new group"-->
    <!--:visible.sync="newGroupInnerOneVisible">-->
    <!--<el-row class="box">-->
    <!--<el-col :span="5">-->
    <!--<span class="title">* Group Name</span>-->
    <!--</el-col>-->
    <!--<el-col :span="12">-->
    <!--&lt;!&ndash;这里的input是否需要被禁止输入&ndash;&gt;-->
    <!--<el-input v-model="newGroupName"></el-input>-->
    <!--</el-col>-->
    <!--</el-row>-->
    <!--<span slot="footer" class="dialog-footer">-->
    <!--<el-button @click="handleNewGroupCancel">{{$t("groupSearchResult.Cancel")}}</el-button>-->
    <!--<el-button type="primary" @click="handleNewGroupConfirm">{{$t("groupSearchResult.Confirm")}}</el-button>-->
    <!--</span>-->
    <!--</el-dialog>-->
    <el-dialog
      width="40%"
      class="newGroup-inner-two"
      :title="$t('groupSearchResult.CreateANewGroup')"
      :visible.sync="newGroupInnerTwoVisible"
    >
      <!--@close="closeCreateNewAll"-->
      <!--<i class="el-icon-back" @click="newGroupInnerTwoBack"></i>-->
      <el-row class="box">
        <el-col :span="5">
          <span class="title">* {{$t('groupSearchResult.GroupName')}}</span>
        </el-col>
        <el-col :span="12">
          <!--这里的input是否需要被禁止输入-->
          <el-input v-model="newGroupName2" disabled></el-input>
        </el-col>
      </el-row>
      <el-row class="chooseBox" v-if="inputOptions2.length!==0">
        <!--未完-->
        <el-col :offset="5">
          <el-radio v-model="radio" label="1" @change="radioValChange">{{$t("groupSearchResult.BelowSimilarGroup")}}?
          </el-radio>
        </el-col>
        <el-col class="outer" :span="12" :offset="5">
          <ul class="inner">
            <li @click="handleSelect(item.name)" v-for="(item,index) in inputOptions2"
                :class="{isChecked:item.checked}" :key="item.name">{{item.name}}
            </li>
          </ul>
        </el-col>
        <el-col :offset="5">
          <el-radio v-model="radio" label="2" @change="radioValChange">{{$t("groupSearchResult.CreateNewGroup")}}!</el-radio>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
          <!--<el-button @click="handleNewGroupInnerCancel">{{$t("groupSearchResult.Cancel")}}</el-button>-->
          <el-button type="primary" @click="handleNewGroupInnerSimilar"
                     v-if="radio==='1'">{{$t("groupSearchResult.MoveToSimilar")}}</el-button>
          <el-button type="primary" @click="handleNewGroupInnerCreate" v-else>{{$t("groupSearchResult.CreateAndMoveIn")}}</el-button>
        <!--<el-button type="primary" @click="handleNewGroupInnerCreate">No,Create and Move {{movedVal}} in</el-button>-->
        </span>
      <el-dialog
        width="30%"
        :visible.sync="newGroupSimilarVisible"
        append-to-body>
        <div style="text-align: center">
          <i class="el-icon-warning" style="color: #FFBF00;margin-right: 4px;font-size: 18px"></i>
          <span>{{$t("groupSearchResult.MoveToSimilar")}} {{checkedVal}}?</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleNewGroupSimilarCancel">{{$t("groupSearchResult.Cancel")}}</el-button>
          <el-button type="primary"
                     @click="handleNewGroupSimilarConfirm"
                     :loading="loading.moveToSimilarLoading">{{$t("groupSearchResult.Confirm")}}</el-button>
        </span>
      </el-dialog>
      <el-dialog
        width="30%"
        :visible.sync="newGroupCreateVisible"
        append-to-body>
        <div style="text-align: center">
          <i class="el-icon-warning" style="color: #FFBF00;margin-right: 4px;font-size: 18px"></i>
          <span>Create new group {{newGroupName2}} and move account{{selectedArr.length > 1 ? 's' : ''}} in?</span>
        </div>
        <span slot="footer" class="dialog-footer">
           <el-button @click="handleNewGroupCreateCancel">{{$t("groupSearchResult.Cancel")}}</el-button>
          <el-button type="primary" @click="handleNewGroupCreateConfirm"
                     :loading="loading.moveToCreateLoading">{{$t("groupSearchResult.Confirm")}}</el-button>
        </span>
      </el-dialog>
    </el-dialog>
    <el-dialog
      class="edit-outer"
      :visible.sync="editOuterVisible"
      width="30%"
      center
    >
      <h4>Change Group Name to:</h4>
      <el-input v-model="changGroupName" clearable></el-input>
      <p v-show="changGroupNameExisted" style="font-family: PingFangSC-Regular;color: #F04134;font-size: 12px ">
        This Group Name has same as the current one</p>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleEditOuterConfirm">{{$t("groupSearchResult.Confirm")}}</el-button>
        </span>
    </el-dialog>
    <el-dialog
      class="machineDetail-outer"
      :visible.sync="machineDetailVisible"
      width="80%"
      :show-close="false"
      center
    >
      <el-row>
        <el-col :span="10">
          <el-input></el-input>
        </el-col>
      </el-row>
      <div class="machineDetailTableBox">
        <ag-grid-vue
          v-loading="loading.accountsTableLoading"
          style="width: 100%; height: calc(100vh - 530px);" class="ag-theme-balham"
          :gridOptions="machineTransactionOptions"
          :enableColResize="true"
          :enableSorting="true"
          :enableFilter="true"
          :groupHeaders="false"
          :suppressHorizontalScroll="true"
          :suppressRowClickSelection="true"
          :toolPanelSuppressGroups="false"
          :toolPanelSuppressValues="false">
        </ag-grid-vue>
      </div>
    </el-dialog>
    <el-dialog
      class="remove-outer"
      :visible.sync="removeVisible"
      width="30%"
    >
      <div>
        <i class="el-icon-warning" style="color: #FFBF00;margin-right: 4px;font-size: 18px"></i>
        <span style="font-size: 16px">{{$t("groupSearchResult.RemoveThis")}}</span>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="removeVisible=false"
                     style="padding-top: 10px">{{$t("groupSearchResult.Cancel")}}</el-button>
          <el-button type="primary" @click="handleRemoveConfirm" :loading="loading.removeLoading"
                     style="padding-top: 10px">{{$t("groupSearchResult.Confirm")}}</el-button>
        </span>
    </el-dialog>
    <el-dialog
      class="add-outer"
      :title="$t('groupSearchResult.AddAccount')"
      :visible.sync="addOuterVisible"
      width="40%">
      <!--<myInput :options="inputOptions" v-model="inputVal" @change="inputChange"-->
      <!--@createNewGroup="createNewGroup"></myInput>-->
      <el-row>
        <el-col :span="12">
          <div class="move-input" v-clickoutside="handleClickOutSide">
            <el-input
              v-model="inputAccountVal"
              :placeholder="$t('groupSearchResult.InputAccountName2')"
              @keyup.native="loadAccountInput(inputAccountVal)"
              @focus="addInputFocus">
              <i slot="suffix" class="el-input__icon el-icon-close clear-icon" @click.stop="clearInputAccountValue"></i>
            </el-input>
            <div v-show="dropDownShow2" class="dropDownBox">
              <el-scrollbar>
                <div class="tab">
                  <ul style="margin: 0;padding: 0">
                    <li
                      class="tab-item"
                      v-for="(item,index) in inputAddOptions"
                      :key="item"
                      @click.stop="handleCheckedValuesChange2(item)"
                    >{{item}}
                    </li>
                  </ul>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <p class="waringBox" v-show="addWarning">{{addWarningText}}</p>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleAddOuterSubmit">{{$t("groupSearchResult.Submit")}}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="add-inner"
      :visible.sync="addInnerVisible"
      width="80%"
    >
      <!--:show-close="false"-->
      <!--@close="closeAddAll"-->
      <!--<i class="el-icon-back" @click="addInnerBack"></i>-->
      <!--<i class="el-icon-close" @click="closeAddAll"></i>-->
      <!--<el-input v-model="addName"></el-input>-->
      <div class="add-table">
        <ag-grid-vue
          v-loading="loading.addTableLoading"
          style="width: 100%; height: calc(35vh);" class="ag-theme-balham"
          :gridOptions="addTransactionOptions"
          :enableColResize="true"
          :suppressHorizontalScroll="true"
          :groupHeaders="false"
          :suppressRowClickSelection="true"
          :toolPanelSuppressGroups="false"
          :toolPanelSuppressValues="false">
        </ag-grid-vue>
        <!--:enableServerSideSorting="true"-->
        <!--排序需要服务端支持sortModel:[{colId: "account_name", sort: "desc下降"或"asc上升"}]-->
        <!--:enableServerSideFilter="true"-->
        <!--服务端过滤，过滤条件需要前端写死？-->
        <!--filterModel:{global_account_name: {values: ["ecc"], filterType: "set"}}-->
        <div class="block">
          <el-pagination
            @size-change="handleAddSizeChange"
            @current-change="handleAddCurrentChange"
            :page-sizes=[50,100,150,200]
            layout="total, sizes, prev, pager, next, jumper"
            :total="addTableTotal">
            <!--accountsTableTotal-->
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleAddCancel">{{$t("groupSearchResult.Cancel")}}</el-button>
          <el-button type="primary" @click="handleAddConfirm">{{$t("groupSearchResult.Add")}}</el-button>
        </span>
      <el-dialog
        width="30%"
        :visible.sync="addInnerVisible2"
        append-to-body
      >
        <div style="text-align: center">
          <i class="el-icon-warning" style="color: #FFBF00;margin-right: 4px;font-size: 18px"></i>
          <span>{{$t("groupSearchResult.AddAccountIn")}}?</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button  @click="handleAddInnerCancel">{{$t("groupSearchResult.Cancel")}}</el-button>
          <el-button type="primary" @click="handleAddInnerConfirm" :loading="loading.addLoading">{{$t("groupSearchResult.Confirm")}}</el-button>
        </span>
      </el-dialog>
    </el-dialog>
    <el-dialog
      class="removeDetail-outer"
      :visible.sync="removeDetailOuterVisible"
      width="80%"
    >
      <div class="removeDetailTableBox">
        <ag-grid-vue
          v-loading="loading.RemoveDetailLoading"
          style="width: 100%; height: 35vh;" class="ag-theme-balham"
          :gridOptions="removeDetailTransactionOptions"
          :enableColResize="true"
          :enableSorting="true"
          :enableFilter="true"
          :groupHeaders="false"
          :suppressHorizontalScroll="true"
          :suppressRowClickSelection="true"
          :toolPanelSuppressGroups="false"
          :toolPanelSuppressValues="false">
        </ag-grid-vue>
        <div class="block">
          <!--<el-pagination-->
          <!--@size-change="handleSizeChange"-->
          <!--@current-change="handleCurrentChange"-->
          <!--:page-sizes=[50,100,150,200]-->
          <!--layout="total, sizes, prev, pager, next, jumper"-->
          <!--:total="accountsTableTotal">-->
          <!--&lt;!&ndash;accountsTableTotal&ndash;&gt;-->
          <!--</el-pagination>-->
        </div>
      </div>
    </el-dialog>
    <!--<div class="shade-box" v-show="outerVisible">-->
    <!--<el-dialog-->
    <!--title="外层new group"-->
    <!--:visible.sync="newGroupOuterVisible"-->
    <!--width="50%"-->
    <!--center-->
    <!--&gt;-->
    <!--</el-dialog>-->
    <!--</div>-->
    <div class="result-Header group-header">
      <h3 style="display: inline-block" v-if="groupOrCustomer==='Group'">{{$t("groupSearchResult.GroupName")}}: {{groupOrCustomerName}}</h3>
      <h3 style="display: inline-block" v-else>{{$t("groupSearchResult.IDName")}}: {{groupOrCustomerName}}</h3>
      <!--<a href="javascript:;" @click="editGroupName" style="font-size: 12px;color:#55A6FB">Edit</a>-->
    </div>
    <el-card>
      <div class="accountsTable">
        <div class="table-header" style="margin-bottom: 10px">
          <span class="title">{{$t("groupSearchResult.Accounts")}}</span>
          <div class="edit-box">
            <div class="remove">
              <el-button @click="handleRemoveAgGrid">{{$t("groupSearchResult.Remove")}}</el-button>
            </div>
            <div class="moveTo" v-if="groupOrCustomer==='Group'">
              <el-button @click="handleMoveTo">{{$t("groupSearchResult.MoveTo")}}</el-button>
            </div>
            <div class="add" v-if="groupOrCustomer==='Group'">
              <el-button @click="handleAddAccount">{{$t("groupSearchResult.AddAccount")}}</el-button>
            </div>
          </div>
          <!--<div class="add-box" @click="addAccount">-->
          <!--<i class="el-icon-plus"></i>-->
          <!--<span>Add Acount</span>-->
          <!--</div>-->
        </div>
        <div class="accountsTableBox">
          <!--<el-button @click="seclectAll">select all</el-button>-->
          <ag-grid-vue
            v-loading="loading.accountsTableLoading"
            style="width: 100%; height: calc(100vh - 330px);" class="ag-theme-balham"
            :gridOptions="accountsTransactionOptions"
            :enableColResize="true"
            :groupHeaders="false"
            :suppressHorizontalScroll="true"
            :suppressRowClickSelection="true"
            :toolPanelSuppressGroups="false"
            :toolPanelSuppressValues="false">
          </ag-grid-vue>
          <!--:enableServerSideSorting="true"-->
          <!--排序需要服务端支持sortModel:[{colId: "account_name", sort: "desc下降"或"asc上升"}]-->
          <!--:enableServerSideFilter="true"-->
          <!--服务端过滤，过滤条件需要前端写死？-->
          <!--filterModel:{global_account_name: {values: ["ecc"], filterType: "set"}}-->
          <!--<div class="block">-->
          <!--<el-pagination-->
          <!--@size-change="handleSizeChange"-->
          <!--@current-change="handleCurrentChange"-->
          <!--:page-sizes=[50,100,150,200]-->
          <!--layout="total, sizes, prev, pager, next, jumper"-->
          <!--:total="accountsTableTotal">-->
          <!--&lt;!&ndash;accountsTableTotal&ndash;&gt;-->
          <!--</el-pagination>-->
          <!--</div>-->
        </div>
      </div>
    </el-card>
    <!--@mouseleave="boxIsHiddenFun"-->
    <div class="changeLog" @mouseleave="boxIsHiddenFun" ref="changeLog">
      <div class="header" style="margin-bottom: 10px">
        <!--@mouseenter="boxIsShowFun"-->
        <div @mouseenter.stop="boxIsShowFun" style="cursor: pointer;overflow: hidden " class="titleBox">
          <span class="title">{{$t("groupSearchResult.ChangeLog")}}</span>
          <!--<i :class="[!boxIsShow?'el-icon-caret-bottom':'el-icon-caret-top']"></i>-->
        </div>
        <div class="pinBox" @click="iconIsPinFun" v-show="boxIsShow">
          <i class="icon iconfont" :class="iconIsPin?'icon-pin-':'icon-pin2'"></i>
        </div>
      </div>
      <!--<transition enter-class="el-zoom-in-top-enter" enter-active-class="el-zoom-in-top-enter-active">-->
      <!--@mouseleave="boxIsHiddenFun"-->
      <div class="changeLogBox" v-show="boxIsShow">
        <div class="changelogTable">
          <ag-grid-vue
            v-loading="loading.changeLogLoading"
            style="width: 100%; height: calc(100vh - 330px);" class="ag-theme-balham"
            :gridOptions="changeLogTransactionOptions"
            :enableColResize="true"
            :enableSorting="true"
            :enableFilter="true"
            :groupHeaders="false"
            :suppressRowClickSelection="true"
            :toolPanelSuppressGroups="false"
            :toolPanelSuppressValues="false">
          </ag-grid-vue>
        </div>
      </div>
      <!--</transition>-->
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import myInput from '../components/myInput.vue'
  import clickoutside from '../components/clickoutside';
  import {getUsername, getPageId, getPageName, getUrl, setKeyword, setbutValue} from "../../../utils/auth";
  import {AgGridVue} from "ag-grid-vue";
  import {mapGetters} from 'vuex'
  //  import myDialog from '../components/myDialog.vue'
  function GenderCellRenderer() {
  }
  GenderCellRenderer.prototype.init = function (params) {
    let a=params.value.substring(params.values.length,params.value.length);
    this.eGui = document.createElement('span');
    if (params.value !== "" || params.value !== undefined || params.value !== null) {
      var gender = '<span style="color: blue">'+params.values+'</span>';
      this.eGui.innerHTML = gender + a;
    }
  };
  GenderCellRenderer.prototype.getGui = function () {
    return this.eGui;
  };
  export default {
    name: 'GroupSearchResult',
    data(){
      return {
        ElElement: document.getElementsByTagName('html')[0],
        groupOrCustomer: '',
        urlPost: '/accountSearch/getInfoByGroupName',
        groupOrCustomerName: '',
        changeLogTimer: null,
        changeLogOffSet: 0,
        isSelect: false,
        radio: '1',
        once:null,
        once2:null,
        selectedArr: [],
        selectedArr2: [],
        tableDataAccounts1: [
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
          {
            account_id: "",
            account_name: "VENDOR",
            group_name: "IBM",
            global_account_id: "",
            global_account_name: "",
            dmu_id: "",
            geo: "NA",
            region: "TX",
            country: "US"
          },
        ],
        tableDataAccounts: [],
        tableDataAdd: [],
        tableDataLog1: [
          {
            date: 1542885507000,
            editor: "menzy2",
            detaill: [
              {
                country: "CA",
                from: "VENDOR",
                to: "IBM"
              },
              {
                country: "US",
                from: "VENDOR",
                to: "IBM"
              }
            ],
            action: "Move",
            id: 13
          },
          {
            date: 1542885693000,
            editor: "menzy2",
            detaill: [
              {
                country: "CA",
                from: "VENDOR",
                to: "IBM"
              },
              {
                country: "US",
                from: "VENDOR",
                to: "IBM"
              },
              {
                country: "US",
                from: "VENDOR",
                to: "IBM"
              },
              {
                country: "US",
                from: "VENDOR",
                to: "IBM"
              }
            ],
            action: "Move",
            id: 14
          }
        ],
        accountsTransactionOptions: {
          postParams: [], //粘贴修改status comments的数据
          enableRangeSelection: true,
          rowSelection: 'multiple',
          rowModelType: 'serverSide',
          cacheBlockSize: 50,
          maxBlocksInCache: 10,
          context: {
            componentParent: this
          },
          columnDefs: [
            {
              headerName: "Account ID",
              field: "account_id",
              headerCheckboxSelection: true,
              checkboxSelection: true,
            },
            {
              headerName: "Account name",
              field: "account_name",
            },
            {
              headerName: "Global Account ID",
              field: "global_account_id",
            },
            {
              headerName: "Global Account Name",
              field: "global_account_name",
              //服务端过滤
              filter: 'agSetColumnFilter',
              filterParams: {values: ['IBM','ecc'], newRowsAction: 'keep'}
            },
            {
              headerName: "DMU ID",
              field: "dmu_id",
            },
            {
              headerName: "Geo",
              field: "geo",
            },
            {
              headerName: "Region",
              field: "region",
            },
            {
              headerName: "Country",
              field: "country",
            },
            {
              headerName: "Machine",
              field: "machine",
            },
//            {
//              headerName: "Edit",
//              cellRendererFramework: 'ChildMessageComponent',
//              maxWidth: 80
////              pinned:'right'
//            },
          ],
        },
        machineTransactionOptions: {
          postParams: [], //粘贴修改status comments的数据
          enableRangeSelection: true,
          rowSelection: 'multiple',
          rowModelType: 'serverSide',
          cacheBlockSize: 50,
          context: {
            componentParent: this
          },
          columnDefs: [
            {
              headerName: "Account ID",
              field: "account_id",
              checkboxSelection: true,
              headerCheckboxSelection: true
            },
            {
              headerName: "Account name",
              field: "account_name",
            },
            {
              headerName: "Global Account ID",
              field: "global_account_id",
            },
            {
              headerName: "Global Account Name",
              field: "global_account_name",
            },
            {
              headerName: "DMU ID",
              field: "dmu_id",
            },
            {
              headerName: "Geo",
              field: "geo",
            },
            {
              headerName: "Region",
              field: "region",
            },
            {
              headerName: "Country",
              field: "country",
            },
            {
              headerName: "Machine",
              field: "machine",
            },
//            {
//              headerName: "Edit",
//              cellRendererFramework: 'ChildMessageComponent',
//              maxWidth: 80
////              pinned:'right'
//            },
          ],
        },
        removeDetailTransactionOptions: {
          postParams: [], //粘贴修改status comments的数据
          context: {
            componentParent: this
          },
          columnDefs: [
            {
              headerName: "Account ID",
              field: "account_id",
            },
            {
              headerName: "Account name",
              field: "account_name",
            },
            {
              headerName: "Global Account ID",
              field: "global_account_id",
            },
            {
              headerName: "Global Account Name",
              field: "global_account_name",
            },
            {
              headerName: "DMU ID",
              field: "dmu_id",
            },
            {
              headerName: "Geo",
              field: "geo",
            },
            {
              headerName: "Region",
              field: "region",
            },
            {
              headerName: "Country",
              field: "country",
            },
            {
              headerName: "Machine",
              field: "machine",
            },
          ],
        },
        changeLogTransactionOptions: {
          suppressRowTransform: true,
          context: {
            componentParent: this
          },
          columnDefs: [
            {
              headerName: "Date",
              field: "date",
              width: 280,
              rowSpan: function (params) {
//                console.log(params.data.detailLen);
                if (params.data.detailLen) {
                  return params.data.detailLen
                } else {
                  return 1
                }
              },
              cellClassRules: {
                "cell-span": function (params) {
                  return params.value != undefined
                }
              }
            },
            {
              headerName: "Editor",
              field: "editor",
              width: 150,
              rowSpan: function (params) {
                if (params.data.detailLen) {
                  return params.data.detailLen
                } else {
                  return 1
                }
              },
              cellClassRules: {
                "cell-span": function (params) {
                  return params.value != undefined
                }
              }
            },
            {
              headerName: "Action",
              field: "action",
              width: 150,
              rowSpan: function (params) {
                if (params.data.detailLen) {
                  return params.data.detailLen
                } else {
                  return 1
                }
              },
              cellClassRules: {
                "cell-span": function (params) {
                  return params.value != undefined
                }
              }
            },
//            {
//              headerName: "Action Detail",
//              field: "detail",
//              cellRendererFramework: 'ChangeLogMessageComponent',
//            },
            {
              headerName: "Account ID",
              field: "account_id",
//              width:200
            },
            {
              headerName: "Account name",
              field: "account_name",
//              width:250
            },
            {
              headerName: "Global Account ID",
              field: "global_account_id",
//              width:300
            },
            {
              headerName: "Global Account Name",
              field: "global_account_name",
//              width:300
            },
            {
              headerName: "DMU ID",
              field: "dmu_id",
//              width:250
            },
            {
              headerName: "Geo",
              field: "geo",
              width: 150
            },
            {
              headerName: "Region",
              field: "region",
              width: 150
            },
            {
              headerName: "Country",
              field: "country",
              width: 150
            },
            {
              headerName: "Machine",
              field: "machine",
              width: 150
            },
          ],
        },
        addTransactionOptions: {
          postParams: [], //粘贴修改status comments的数据
          enableRangeSelection: true,
          rowSelection: 'multiple',
          context: {
            componentParent: this
          },
//
          components:{
            genderCellRenderer: GenderCellRenderer,
          },
          columnDefs: [
            {
              headerName: "Account ID",
              field: "account_id",
              checkboxSelection: true,
              headerCheckboxSelection: true
            },
            {
              headerName: "Account name",
              field: "account_name",
              cellRendererSelector:function (params) {
                var genderDetails = {
                  component: 'genderCellRenderer',
                  params: {values: params.context.componentParent.inputAccountVal.toUpperCase()}
                };
                return genderDetails;
//                if(params.context.componentParent.inputAccountVal.length>1){
//                  return genderDetails;
//                }
              }
            },
            {
              headerName: "Global Account ID",
              field: "global_account_id",
            },
            {
              headerName: "Global Account Name",
              field: "global_account_name",
            },
            {
              headerName: "DMU ID",
              field: "dmu_id",
            },
            {
              headerName: "Geo",
              field: "geo",
            },
            {
              headerName: "Region",
              field: "region",
            },
            {
              headerName: "Country",
              field: "country",
            },
            {
              headerName: "Machine",
              field: "machine",
            },
          ],
        },
        tableDataLog: [],
        tableDataRemoveDetail: [],
        multipleSelection: [],
        confirmBoxShow: false,
        successBoxShow: false,
        warningBoxShow: false,

        changGroupName: '',
        accountsTableTotal: 100,
        accountsTableNumber: 1,
        AccountsPageSize: 50,
        addTableTotal:100,
        addTableNumber: 1,
        AddPageSize: 50,
        boxIsShow: false,
        iconIsPin: false,
        changGroupNameExisted: false,

        editOuterVisible: false,
        machineDetailVisible: false,

        moveToOuterVisible: false,
        moveToInnerVisible: false,
        moveToWarning: false,
        moveToWarningText: '',
        addWarning: false,
        addWarningText: '',

//        newGroupOuterVisible:false,
        newGroupInnerOneVisible: false,
        newGroupInnerTwoVisible: false,
        newGroupCreateVisible: false,
        newGroupSimilarVisible: false,

        newGroupExistVisible: false,

        removeVisible: false,
        removeName: '',
        removeParams: {},
        moveToParams: {},
        addParams: {},
        RemoveDetail: {
          accountName: [],
          accountCountry: [],
          accountId: [],
          number: 1,
          pageSize: 10,
          userName: ''
        },
        removeDetailOuterVisible: false,

        addOuterVisible: false,
        addInnerVisible: false,
        addInnerVisible2: false,
        addName: '',
        loading: {
          RemoveDetailLoading: false,
          accountsTableLoading: false,
          changeLogLoading: false,
          removeLoading: false,
          moveToLoading: false,
          moveToSimilarLoading: false,
          moveToCreateLoading: false,
          addTableLoading:false,
          addLoading:false,
        },
        inputOptions: [],
        inputOptions2: [],
        inputAddOptions: [],
        dropDownShow: false,
        dropDownShow2: false,
        movedVal: '',
        inputVal: '',
        inputAccountVal:'',
        newGroupName: '',
        newGroupName2: '',
        checkedVal: '',
        existGroupName: '',
        restaurants: [],
        state4: '',
        timeout: null
      }
    },
    directives: {
      'clickoutside': clickoutside
    },
    methods: {
      proxyClick: (function () {
        //防抖函数
        let cache = [];
        let timer = null;
        return function (FUNC, time = 1000) {
          if (timer) {
            return
          }
          timer = setTimeout(function () {
            FUNC();
            timer = null
          }, time)
        }
      })(),
      getSelectedRows() {
        const selectedNodes = this.accountsTransactionOptions.api.getSelectedNodes();
        const selectedData = selectedNodes.map(node => node.data);
//        console.log(selectedData,'selectedDataselectedData');
        this.loading.removeLoading = false;
        this.removeVisible = true;
        let params = {
          accountName: [],
          accountId: [],
          accountCountry: [],
          oldCustomerGroupName: this.groupOrCustomerName,
          customerGroupName: '',
          username: getUsername()
        };
        if (selectedData.length !== 0) {
          selectedData.forEach((item) => {
            params.accountName.push(item.account_name);
            params.accountId.push(item.account_id);
            params.accountCountry.push(item.country)
          })
        } else {
          params.accountName.push(row.account_name);
          params.accountId.push(row.account_id);
          params.accountCountry.push(row.country)
        }
        this.removeParams = params;
      },
      showRemoveDetail(item){
        this.RemoveDetail.userName = item.editor;
        this.RemoveDetail.action = item.action;
        this.RemoveDetail.to = item.detail[0].to;
        item.detail.forEach((item) => {
          this.RemoveDetail.accountCountry.push(item.country);
          this.RemoveDetail.accountName.push(item.from);
          this.RemoveDetail.accountId.push(item.accountId);
        });
        this.removeDetailOuterVisible = true;
        this.showRemoveTable()
      },
      async showRemoveTable(params = {}){
        let _this = this;
        this.loading.RemoveDetailLoading = true;
        params = {
          accountName: this.RemoveDetail.accountName,
          accountCountry: this.RemoveDetail.accountCountry,
          accountId: this.RemoveDetail.accountId,
          username: this.RemoveDetail.userName,
          pageSize: this.RemoveDetail.pageSize,
          page: this.RemoveDetail.number,
        };
        try {
          let res = await this.axios.post('/accountSearch/getInfoByMemberName', params);
          let resData = res.data;
          if (resData.status === 200) {
            this.tableDataRemoveDetail = resData.data.rows;
            this.removeDetailTransactionOptions.api.setRowData(this.tableDataRemoveDetail);
            this.removeDetailTransactionOptions.api.sizeColumnsToFit();//一行显示
            this.loading.RemoveDetailLoading = false;
            this.RemoveDetail.userName = '';
            this.RemoveDetail.accountCountry = [];
            this.RemoveDetail.accountName = [];
            this.RemoveDetail.accountId = [];
          }
        } catch (e) {
          console.log(e);
        }
      },
      iconIsPinFun(){
        this.iconIsPin = !this.iconIsPin
      },
      boxIsHiddenFun(){
        clearInterval(this.changeLogTimer);
        this.changeLogOffSet = 0;
        if (!this.iconIsPin) {
          this.changeLogTimer = setInterval(() => {
            if (this.ElElement.scrollTop <= 0) {
              this.ElElement.scrollTop = 0;
              clearInterval(this.changeLogTimer);
              this.changeLogTimer = null;
              this.boxIsShow = false;
              return;
            }
            this.ElElement.scrollTop = this.ElElement.scrollTop - 15;
          }, 17)
//          this.ElElement.scrollTop = 0;
        }
      },
      boxIsShowFun(){
        clearInterval(this.changeLogTimer);
        this.changeLogOffSet = 0;
        this.boxIsShow = true;
        this.$nextTick(() => {
          this.changeLogOffSet = this.$refs.changeLog.offsetHeight;
          this.changeLogTimer = setInterval(() => {
            if (this.ElElement.scrollTop >= this.changeLogOffSet - 60) {
              this.ElElement.scrollTop = this.changeLogOffSet;
              clearInterval(this.changeLogTimer);
              this.changeLogTimer = null;
              return;
            }
            this.ElElement.scrollTop = this.ElElement.scrollTop + 15;
          }, 17);
          this.changeLogTransactionOptions.api.sizeColumnsToFit();
        });

//        setTimeout(() => {
//          this.ElElement.scrollTop = 1000;
//          this.changeLogTransactionOptions.api.sizeColumnsToFit();
//        }, 20);

//        if (this.boxIsShow) {
//          setTimeout(() => {
//            this.ElElement.scrollTop = 1000;
//            this.changeLogTransactionOptions.api.sizeColumnsToFit();
//          }, 20)
//        } else {
//          this.ElElement.scrollTop = 0;
//        }
      },
      handleCurrentChange(val){
        this.accountsTableNumber = val;
        this.loadAccountsData();
      },
      handleSizeChange(val){
        this.AccountsPageSize = val;
        this.loadAccountsData();
      },
      handleAddCurrentChange(val){
        this.addTableNumber = val;
        this.loadAddAgGrid();
      },
      handleAddSizeChange(val){
        this.AddPageSize = val;
        this.loadAddAgGrid();
      },
      addAccount(){
        this.addVisible = true;
      },
      editGroupName(){
        this.editOuterVisible = true;

      },
      async changeNameExisted(params = {}){
        params = {
          customerGroupName: this.changGroupName,
          username: getUsername()
        };
        let res = await this.axios.post('/groupSearch/checkGroupName', params);
        let resData = res.data;
        if (resData.status === 200) {
          this.changGroupNameExisted = resData.data.data === 'error' ? true : false;
        }
      },
      async changeGroupName(params = {}){
        params = {
          customerGroupName: this.changGroupName,
          oldCustomerGroupName: this.groupOrCustomerName,
          username: getUsername()
        };
        let res = await this.axios.post('/groupSearch/renameForGroup', params);
        let resData = res.data;
        if (resData.data.data === 'success') {
          this.editOuterVisible = false;
          this.groupOrCustomerName = this.changGroupName;
          this.$message({
            type: 'success',
            dangerouslyUseHTMLString: true,
            center: true,
            message: 'Group Name has successfully Changed.'
          })
        }

      },
      async handleEditOuterConfirm(){
        //判断名字是否存在
        if (this.changGroupName !== '') {
          this.changeNameExisted().then(() => {
//              console.log(this.changGroupNameExisted);
              if (!this.changGroupNameExisted) {
                this.changeGroupName()
              }

            }
          )
        }
//
      },
      handleRemoveConfirm(){
//        this.removeVisible = false;
//        this.confirmBoxShow = true;
        this.loading.removeLoading = true;
        this.removeAsyncFunction();
//        this.$message({
//          type: 'success',
//          dangerouslyUseHTMLString: true,
//          center: true,
//          message: 'Group Name has successfully Changed.'
//        })
      },
      addInnerBack(){
        this.addInnerVisible = false;
      },
      closeAddAll(){
//        this.addInnerVisible = false;
        this.addOuterVisible = false;
      },
      handleAddCancel(){
        this.addInnerVisible = false;
      },
      handleAddConfirm(){
        this.loading.addLoading = false;
        this.selectedArr2 = this.addTransactionOptions.api.getSelectedRows();
        if (this.selectedArr2.length === 0) {
          this.$toast(this.$t("groupSearchResult.NeedSelectAdd"), 'warning');
        } else {
//          this.loading.addLoading = false;
          this.addInnerVisible2 = true;
          let params = {
            accountName: [],
            accountId: [],
            accountCountry: [],
            oldCustomerGroupName:'',
            customerGroupName: this.groupOrCustomerName,
            username: getUsername()
          };
          this.selectedArr2.forEach((item) => {
            params.accountName.push(item.account_name);
            params.accountId.push(item.account_id);
            params.accountCountry.push(item.country)
          });
          this.addParams = params;
        }
      },
      handleAddInnerCancel(){
        this.addInnerVisible2 = false;
      },
      handleAddInnerConfirm(){
        this.loading.addLoading = true;
        this.addAsyncFunction();
      },
      async addAsyncFunction(){
        let _this = this;
        try {
          let res = await this.axios.post('/accountSearch/removeMemberGroup', this.addParams);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.data === 'success') {
              this.loading.addLoading = false;
              this.addInnerVisible2 = false;
              this.addInnerVisible = false;
              this.addOuterVisible = false;
              this.$toast(this.$t("groupSearchResult.UpdateInPower"), 'success');
              this.boxIsShow = false;
              //取消ag-grid选中
              this.addTransactionOptions.api.deselectAll();
              this.loadAccountsData();
              this.loadChangeLogData();
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      handleAddOuterSubmit(){
        this.addWarning=false;
        if(this.inputAccountVal.trim()===''){
          this.addWarningText=this.$t('groupSearchResult.InputAccountName');
          this.addWarning=true;
          return;
        }
        this.loadAddAgGrid();
        this.addInnerVisible=true;
      },
      async loadAddAgGrid(){
        this.loading.addTableLoading = true;
        let params={
          searchValue:this.inputAccountVal,
          pageSize:this.AddPageSize,
          page:this.addTableNumber,
          username: getUsername()
        };
        try{
          let res=await this.axios.post('/accountSearch/getNameSelectValues',params);
          let resData = res.data;
          if (resData.status === 200) {
            this.addTableTotal = resData.data.count;
            this.tableDataAdd = resData.data.rows;
            this.addTransactionOptions.api.setRowData(this.tableDataAdd);
            this.addTransactionOptions.api.sizeColumnsToFit();//一行显示
            this.loading.addTableLoading = false;
          }
        }catch (e){
          console.log(e);
        }
      },
      async checkoutGroupName(){
        let params = {
          customerGroupName: this.inputVal,
          username: getUsername()
        };
        try {
          let res = await this.axios.post('/groupSearch/checkGroupName', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.data === 'success') {
              return true
            } else {
              return false
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async createNewGroup(){
        this.moveToWarning = false;
        if (this.inputVal.trim() === '') {
          this.moveToWarningText = this.$t('groupSearchResult.InputGroupName');
          this.moveToWarning = true;
          return
        }
        let checkoutValue = await this.checkoutGroupName();
        if (!checkoutValue) {
          this.moveToWarningText = this.$t('groupSearchResult.GroupExisted');
          this.moveToWarning = true;
        } else {
          this.moveToWarning = false;
          this.newGroupName2 = this.inputVal;
          this.inputOptions2 = this.inputOptions.map((item, index) => {
            if (index === 0) {
              this.checkedVal = item;
              return {name: item, checked: true}
            } else {
              return {name: item, checked: false}
            }
          });
          this.newGroupInnerTwoVisible = true;
          if (this.inputOptions2.length === 0) {
            this.radio = '2';
          } else {
            this.radio = '1';
          }
        }
        //进来需要判断inputVal是否存在
        //假设不存在
//        this.newGroupInnerVisible = true;
//        this.newGroupName = this.inputVal
        //假设存在
//        this.newGroupExistVisible = true;
//        this.existGroupName = this.inputVal
      },
//      inputChange(val){
//        console.log(val);
//        this.loadInput(val)
//      },
      handleClickOutSide(){
        this.dropDownShow = false;
        this.dropDownShow2 = false;
      },
      loadInput(val){
        clearTimeout(this.once);
        if(val.trim()===''){
          return;
        }
        this.once=setTimeout(()=>{
          try {
            this.axios.post('/groupSearch/getNameSelectValues', {searchValue: this.inputVal,username: getUsername()}).then((res)=>{
              let resData = res.data;
              if (resData.status === 200) {
//            console.log(resData.data);
                if (resData.data.length !== 0) {
                  this.inputOptions = resData.data.data;
                  this.dropDownShow = true;
                }
              }
            })
          } catch (e) {
            console.log(e);
          }
        },300)
      },
      loadAccountInput(val){
        clearTimeout(this.once2);
        if(val.trim()===''){
          return;
        }
        this.once2=setTimeout(()=>{
          try {
            this.axios.post('/accountSearch/getDropSelectValues', {searchValue: this.inputAccountVal,username: getUsername()}).then((res)=>{
              let resData = res.data;
              if (resData.status === 200) {
                if (resData.data.length !== 0) {
                  this.inputAddOptions = resData.data.rows;
                  this.dropDownShow2 = true;
                }
              }
            })
          } catch (e) {
            console.log(e);
          }
        },300)
      },
      moveInputFocus(){
        this.dropDownShow = true;
      },
      addInputFocus(){
        this.dropDownShow2 = true;
      },
      handleCheckedValuesChange(val){
        this.inputVal = val;
        this.dropDownShow = false;
      },
      handleCheckedValuesChange2(val){
        this.inputAccountVal = val;
        this.dropDownShow2 = false;
      },
      clearInputValue(){
        this.inputVal = '';
        this.dropDownShow = false;
      },
      clearInputAccountValue(){
        this.inputAccountVal = '';
        this.dropDownShow2 = false;
      },
      handleSelectionChange(val) {
        console.log(val);
//        if (val.length !== 0) {
//          this.isSelect = true;
//        } else {
//          this.isSelect = false;
//        }
        this.multipleSelection = val
      },
      handleMachineDetail(){
        this.machineDetailVisible = true;
      },
      handleAddAccount(){
        this.addOuterVisible=true;
      },
      handleMoveTo() {
        //move to的方法
        this.loading.moveToLoading = false;
        this.selectedArr = this.accountsTransactionOptions.api.getSelectedRows();
        if (this.selectedArr.length === 0) {
          this.$toast(this.$t("groupSearchResult.NeedSelectMoveTo"), 'warning');
        } else {
          this.loading.moveToLoading = false;
          this.moveToOuterVisible = true;
          let params = {
            accountName: [],
            accountId: [],
            accountCountry: [],
            oldCustomerGroupName: this.groupOrCustomerName,
            customerGroupName: '',
            username: getUsername()
          };
          this.selectedArr.forEach((item) => {
            params.accountName.push(item.account_name);
            params.accountId.push(item.account_id);
            params.accountCountry.push(item.country)
          });
          this.moveToParams = params;
        }
      },
      handleRemoveAgGrid(){
//        this.getSelectedRows(row);
        this.selectedArr = this.accountsTransactionOptions.api.getSelectedRows();
        if (this.selectedArr.length === 0) {
          //全局提示框插件
          this.$toast(this.$t("groupSearchResult.NeedSelectRemoved"), 'warning');
        } else {
          this.loading.removeLoading = false;
          this.removeVisible = true;
          let params = {
            accountName: [],
            accountId: [],
            accountCountry: [],
            oldCustomerGroupName: this.groupOrCustomerName,
            customerGroupName: '',
            username: getUsername()
          };
          this.selectedArr.forEach((item) => {
            params.accountName.push(item.account_name);
            params.accountId.push(item.account_id);
            params.accountCountry.push(item.country)
          });
          this.removeParams = params;
        }
      },
      async removeAsyncFunction(){
        let _this = this;
        try {
          let res = await this.axios.post('/accountSearch/removeMemberGroup', this.removeParams);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.data === 'success') {
              this.loading.removeLoading = false;
              this.removeVisible = false;
              this.$toast(this.$t("groupSearchResult.SuccessfullyRemoved"), 'success');
              this.boxIsShow = false;
              //取消ag-grid选中
              this.accountsTransactionOptions.api.deselectAll();
              this.loadAccountsData();
              this.loadChangeLogData();
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      handleMoveToOuterSubmit(){
//        this.moveToOuterVisible = false;
        this.moveToWarning = false;
        if (this.inputVal.trim() === '') {
          this.moveToWarningText = this.$t('groupSearchResult.InputGroupName');
          this.moveToWarning = true;
          return
        }
        //判断inputVal的名字是否已存在
        if (this.inputOptions.includes(this.inputVal)) {
          this.moveToWarning = false;
          this.moveToInnerVisible = true
        } else {
          this.moveToWarningText = this.$t('groupSearchResult.GroupInexistent');
          this.moveToWarning = true;
        }
      },
      handleMoveToInnerCancel(){
        this.moveToInnerVisible = false;
      },
      async handleMoveToInnerConfirm(){
        let _this = this;
        this.loading.moveToLoading = true;
        this.moveToParams['customerGroupName'] = this.inputVal;
        try {
          let res = await this.axios.post('/accountSearch/removeMemberGroup', this.moveToParams);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.data === 'success') {
              this.loading.moveToLoading = false;
              this.moveToInnerVisible = false;
              this.moveToOuterVisible = false;
              this.$toast(this.$t("groupSearchResult.UpdateInPower"), 'success');
              this.boxIsShow = false;
              this.accountsTransactionOptions.api.deselectAll();
              this.loadAccountsData();
              this.loadChangeLogData();
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      handleNewGroupCancel(){
        this.newGroupInnerOneVisible = false;
      },
      handleNewGroupConfirm(){
        this.newGroupInnerTwoVisible = true;
        this.newGroupName2 = this.inputVal
      },
      handleSelect(val){
        if (this.radio === '2') {
          return
        }
        this.checkedVal = val;
        this.newGroupName2 = val;
        this.inputOptions2 = this.inputOptions2.map((item, index) => {
          if (item.name === val) {
            return {name: item.name, checked: true}
          } else {
            return {name: item.name, checked: false}
          }
        });
      },
      radioValChange(){
        if (this.radio === '2') {
          this.newGroupName2 = this.inputVal;
        } else {
          this.newGroupName2 = this.checkedVal;
        }
      },
//      handleNewGroupInnerCancel(){
//        this.newGroupInnerTwoVisible = false;
//      },
      closeCreateNewAll(){
        console.log(this.moveToOuterVisible, this.newGroupInnerTwoVisible);
        this.newGroupInnerTwoVisible = false;
        this.moveToOuterVisible = false;
      },
      newGroupInnerTwoBack(){
        this.newGroupInnerTwoVisible = false;
      },
      handleNewGroupInnerSimilar(){
        this.newGroupSimilarVisible = true;
      },
      handleNewGroupInnerCreate(){
//        console.log(this.newGroupName2, 'this.newGroupName2this.newGroupName2');
        this.newGroupCreateVisible = true;
//
      },
      handleNewGroupSimilarCancel(){
        this.newGroupSimilarVisible = false;
      },
      handleNewGroupCreateCancel(){
        this.newGroupCreateVisible = false;
      },
      async handleNewGroupSimilarConfirm(){
        let _this = this;
        this.loading.moveToSimilarLoading = true;
        this.moveToParams['customerGroupName'] = this.checkedVal;
        try {
          let res = await this.axios.post('/accountSearch/removeMemberGroup', this.moveToParams);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.data === 'success') {
              this.loading.moveToSimilarLoading = false;
              this.newGroupSimilarVisible = false;
              this.newGroupInnerTwoVisible = false;
              this.moveToOuterVisible = false;
              this.$toast(this.$t("groupSearchResult.UpdateInPower"), 'success');
              this.boxIsShow = false;
              this.accountsTransactionOptions.api.deselectAll();
              this.loadAccountsData();
              this.loadChangeLogData();
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async createNewGroupFun(){
        let _this = this;
        let params = {
          customerGroupName: this.newGroupName2,
          username: getUsername()
        };
        try {
          let res = await this.axios.post('/groupSearch/addGroupName', params)
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.data === 'success') {
              return true
            } else {
              return false
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      async handleNewGroupCreateConfirm(){
        let _this = this;
        this.loading.moveToCreateLoading = true;
        let result = await this.createNewGroupFun();
        if (result) {
          this.moveToParams['customerGroupName'] = this.newGroupName2;
          try {
            let res = await this.axios.post('/accountSearch/removeMemberGroup', this.moveToParams);
            let resData = res.data;
            if (resData.status === 200) {
              if (resData.data.data === 'success') {
                this.loading.moveToCreateLoading = false;
                this.newGroupCreateVisible = false;
                this.newGroupInnerTwoVisible = false;
                this.moveToOuterVisible = false;
                this.$toast(this.$t("groupSearchResult.UpdateInPower"), 'success');
                this.boxIsShow = false;
                this.accountsTransactionOptions.api.deselectAll();
                this.loadAccountsData();
                this.loadChangeLogData();
              }
            }
          } catch (e) {
            console.log(e);
          }
        } else {
          //创建newGroupName失败
        }
      },
      handleNewGroupExistMoveTo(){
        this.moveToOuterVisible = false;
        this.newGroupExistVisible = false;
        this.$message({
          type: 'success',
          dangerouslyUseHTMLString: true,
          center: true,
          message: `<span>已经将${this.movedVal} move to ${this.inputVal}</span>`
        })
      },
      handleNewGroupExistRename(){

      },
      serverInfiniteFun(that, params, url){
        //无限滚动公用方法;
        //第一个参数,传进来的this,用于调用全局axios;
        //第二个参数,params对象,除去endRow,startRow外后端需要的其他请求参数;
        //第三个参数,url字符串,请求路径;
        function ServerSideDataSource(server) {
          return {
            async getRows(params) {
              let response = await server.getResponse(params.request);
              if (response.success === 'success') {
                params.successCallback(response.rows, response.lastRow);
              } else {
                params.failCallback();
              }
            }
          };
        }
        function FakeServer(that, params, url) {
          return {
            async getResponse(request) {
              request = {...request, ...params};
              let res = await that.axios.post(url, request);
              let resData = res.data;
              if (resData.status === 200) {
                return {
                  success: resData.msg,
                  rows: resData.data.rows,
                  lastRow: resData.data.lastRow
                }
              }
            }
          };
        }
        let server = new FakeServer(that, params, url);
        let dataSource = new ServerSideDataSource(server);
        return dataSource
      },
      seclectAll(){
        //实验服务端全选
        this.accountsTransactionOptions.api.selectAll();
      },
      async loadAccountsData(){
        let _this = this;
        this.loading.accountsTableLoading = true;
        let url = '/accountSearch/getInfoByGroupName';
        let params = {
          username: getUsername(),
//          customerGroupName: this.groupOrCustomerName
        };
        if (this.groupOrCustomer !== 'Group') {
          params['customerAccountName'] = this.groupOrCustomerName
        } else {
          params['customerGroupName'] = this.groupOrCustomerName
        }
        let datasource = this.serverInfiniteFun(this, params, url);
        this.accountsTransactionOptions.api.setServerSideDatasource(datasource);
        this.accountsTransactionOptions.api.sizeColumnsToFit();//一行显示
        this.loading.accountsTableLoading = false;
      },
      async loadChangeLogData(params = {}){
        let _this = this;
        this.loading.changeLogLoading = true;
        params = {
          to: this.groupOrCustomerName,
        };
        try {
          let res = await this.axios.post('/groupUpdateLogger/getLogs', params);
          let resData = res.data;
          if (resData.status === 200) {
//            this.tableDataLog = resData.data.data;
            let tableDataLog = resData.data.data;
            let arr1 = [
              {
                date: "2018/11/23 17:42",
                editor: "zhangge2",
                action: "Remove",
                id: "36",
                detail: [
                  {
                    account_id: "1213451700",
                    account_name: "win IBM Ireland",
                    group_name: "ibm",
                    global_account_id: "",
                    global_account_name: "",
                    dmu_id: "",
                    geo: "EMEA",
                    region: "UKIR",
                    country: "IE",
                    machine: 504
                  },
                  {
                    account_id: "1213451700",
                    account_name: "win IBM Ireland",
                    group_name: "ibm",
                    global_account_id: "",
                    global_account_name: "",
                    dmu_id: "",
                    geo: "EMEA",
                    region: "UKIR",
                    country: "IE",
                    machine: 504
                  },
                ]
              },
              {
                date: "2018/11/23 17:42",
                editor: "zhangge2",
                action: "Remove",
                id: "36",
                detail: [
                  {
                    account_id: "1213451700",
                    account_name: "win IBM Ireland",
                    group_name: "ibm",
                    global_account_id: "",
                    global_account_name: "",
                    dmu_id: "",
                    geo: "EMEA",
                    region: "UKIR",
                    country: "IE",
                    machine: 504
                  },
                ]
              },
              {
                date: "2018/11/23 17:42",
                editor: "zhangge2",
                action: "Remove",
                id: "36",
                detail: [
                  {
                    account_id: "1213451700",
                    account_name: "win IBM Ireland",
                    group_name: "ibm",
                    global_account_id: "",
                    global_account_name: "",
                    dmu_id: "",
                    geo: "EMEA",
                    region: "UKIR",
                    country: "IE",
                    machine: 504
                  },
                  {
                    account_id: "1213451700",
                    account_name: "win IBM Ireland",
                    group_name: "ibm",
                    global_account_id: "",
                    global_account_name: "",
                    dmu_id: "",
                    geo: "EMEA",
                    region: "UKIR",
                    country: "IE",
                    machine: 504
                  },
                  {
                    account_id: "1213451700",
                    account_name: "win IBM Ireland",
                    group_name: "ibm",
                    global_account_id: "",
                    global_account_name: "",
                    dmu_id: "",
                    geo: "EMEA",
                    region: "UKIR",
                    country: "IE",
                    machine: 504
                  },
                  {
                    account_id: "1213451700",
                    account_name: "win IBM Ireland",
                    group_name: "ibm",
                    global_account_id: "",
                    global_account_name: "",
                    dmu_id: "",
                    geo: "EMEA",
                    region: "UKIR",
                    country: "IE",
                    machine: 504
                  },
                ]
              },
            ];
            let arr2 = [];
            for (let i = 0; i < tableDataLog.length; i++) {
              let brr = [];
              tableDataLog[i].detail.forEach((item, index) => {
                if (index === 0) {
                  brr.push({
                    date: tableDataLog[i].date,
                    editor: tableDataLog[i].editor,
                    action: tableDataLog[i].action,
                    detailLen: tableDataLog[i].detail.length,
                    ...item
                  });
                } else {
                  brr.push({
                    ...item
                  });
                }
              });
              arr2 = arr2.concat(brr);
            }
//            console.log(arr2,'arr2arr2arr2');
//            this.changeLogTransactionOptions.api.setRowData(this.tableDataLog);
            this.changeLogTransactionOptions.api.setRowData(arr2);
            this.changeLogTransactionOptions.api.sizeColumnsToFit();//一行显示
            this.loading.changeLogLoading = false;
          }
        } catch (e) {
          console.log(e);
        }
      },
      agGridResize(){
        setTimeout(() => {
          this.accountsTransactionOptions.api.sizeColumnsToFit();
          this.changeLogTransactionOptions.api.sizeColumnsToFit();
          if (this.removeDetailOuterVisible) {
            this.removeDetailTransactionOptions.api.sizeColumnsToFit();
          }
        }, 200)
      }
    },
    computed: {
      ...mapGetters(
        ['sidebar']
      )
    },
    components: {
      myInput,
      AgGridVue,
      ChildMessageComponent: {
        template: '<span><i class="el-icon-delete" style="font-size: 16px;cursor: pointer;color: rgb(64, 158, 255);" @click="invokeParentMethod"></i></span>',
        methods: {
          invokeParentMethod() {
            this.params.context.componentParent.handleRemoveAgGrid(this.params.data)
          }
        }
      },
      ChangeLogMessageComponent: {
        template: `<div>
<div v-if="params.data.detail.length<=3">
  <span>Remove</span>
  <span v-for="(item,index) in params.data.detail" :key="index">
  {{item.from}}{{index === params.data.detail.length - 1 ? '' : ','}}
  </span>
  <span>From</span>
  <span>{{params.data.detail[0].to}}</span>
  </div>
  <div v-else>
  <span>Remove</span>
  <span style="color: #409EFF;cursor: pointer;" @click="showRemoveDetailFather">Accounts</span>
  <span>From</span>
  <span>{{params.data.detail[0].to}}</span>
  </div>
</div>`,
        data(){
          return {}
        },
        methods: {
          showRemoveDetailFather(){
            this.params.context.componentParent.showRemoveDetail(this.params.data)
          }
        }
      }
    },
    beforeDestroy() {
      clearInterval(this.changeLogTimer);
      this.changeLogTimer = null;
    },
    beforeMount(){
      this.groupOrCustomer = this.$route.query.show;
      this.groupOrCustomerName = this.$route.query.search_value;
      this.urlPost = this.groupOrCustomer === 'Group' ? '/accountSearch/getInfoByGroupName' : '/accountSearch/getInfoByMember'
    },
    mounted(){
      this.loadAccountsData();
      this.loadChangeLogData();
      window.onresize = () => {
        this.agGridResize()
      };
    },
    watch: {
      'sidebar.opened': function (newVal) {
        this.agGridResize()
      },
      moveToOuterVisible: function (newVal) {
        if (!newVal) {
          this.inputVal = '';
          this.inputOptions = [];
          this.inputOptions2 = [];
          this.moveToWarningText = ''
//          this.accountsTransactionOptions.api.deselectAll();
        }
      },
      addOuterVisible(newVal){
        if (!newVal) {
          this.inputAccountVal = '';
          this.inputAddOptions = [];
          this.addWarningText = ''
//          this.accountsTransactionOptions.api.deselectAll();
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search-page {
    .moveTo-outer,.add-outer {
      .move-input {
        /*width: 280px;*/
      }
      .waringBox {
        margin-top: 5px;
        font-size: 12px;
        color: #f56c6c;
      }
      .createBox {
        position: absolute;
        bottom: 8px;
        right: 10px;
        a {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #108EE9;
          line-height: 18px;
          text-decoration: underline;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    .moveTo-inner {
      .el-dialog__body {
        .innerBox {
          i {
            font-size: 22px;
            color: #FFBF00;
            margin-right: 5px;
          }
          span {
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.75);
            line-height: 21px;
          }
        }
      }
    }
    .newGroup-inner-one {
      .box {
        .title {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #F04134;
          line-height: 40px;
          margin-right: 5px;
        }
      }
    }
    .newGroup-inner-two {
      .el-icon-back {
        position: absolute;
        top: -28px;
        left: 10px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        color: #666666;
      }
      .box {
        .title {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #F04134;
          line-height: 40px;
          margin-right: 5px;
        }
      }
      .chooseBox {
        /*padding-left: 105px;*/
        p {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.65);
          line-height: 18px;
          margin: 8px 0;
        }
        .el-radio {
          .el-radio__label {
            font-size: 12px;
          }
        }
        .outer {
          height: 13vh;
          border: 1px solid #D9D9D9;
          border-radius: 5px;
          overflow: auto;
          .inner {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
              padding-left: 5px;
              line-height: 30px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &:hover {
                /*background: #f5f7fa;*/
                cursor: pointer;
              }
            }
            .isChecked {
              background: #b7e4ff;
            }
          }
        }
      }
    }
    .add-inner{
      .el-icon-back {
        position: absolute;
        top: 13px;
        left: 20px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        color: #666666;
      }
      .el-icon-close {
        position: absolute;
        top: 13px;
        right: 15px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 400;
        color: #878d99;
      }
      .add-table{
        overflow: hidden;
        .block{
          float: right;
          margin-top: 10px;
        }
      }
    }
    .result-Header {
      h3 {
        font-family: OpenSansShin;
        font-size: 20px;
        margin: 15px 0;
        color: #FF5B00;
      }
    }
    .move-input {
      position: relative;
      .dropDownBox {
        position: absolute;
        top: 40px;
        background-color: #fff;
        width: 100%;
        height: 115px;
        /*width: 280px;*/
        border: 1px solid #d1dbe5;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        /*box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);*/
        border-radius: 4px;
        z-index: 2003 !important;
        .tab {
          position: relative;
          width: 100%;
          height: 115px;
          line-height: 28px;
          font-size: 14px;
          color: #999;
          ul {
            .tab-item {
              display: block;
              padding: 0 15px;
              width: 100%;
              color: #5a5e66;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              cursor: pointer;
              /*border-bottom: 1px solid #bfcbd9;*/
              &:hover {
                background: #f5f7fa;
              }
            }
            .item-selected {
              color: #409EFF;
              font-weight: 700
            }
            .item-selected:after {
              position: absolute;
              right: 20px;
              font-weight: 700;
              -webkit-font-smoothing: antialiased;
              font-family: element-icons;
              content: "\E611";
              font-size: 12px;
              color: #409EFF;
            }
          }
        }
        .filterBox, .selectAll {
          /*background: red;*/
          height: 40px;
        }
        .selectAll {
          border-top: 1px solid #d1dbe5;
        }
        .filterBox {
          border-bottom: 1px solid #d1dbe5;
          .el-input {
            input {
              /*margin: 0 20px;*/
              /*line-height: 36px;*/
              /*font-size: 16px;*/
              /*color: #666;*/
              /*border: 0;*/
              /*max-width: calc(100% - 40px);*/
              /*outline: none;*/
            }
          }
        }
        .el-scrollbar {
          /*border-top: 1px solid #bfcbd9;*/
        }
        .createBox {
          text-align: center;
          a {
            line-height: 40px;
            color: #78a5f1;
            cursor: pointer;
          }
        }
      }
      .clear-icon {
        display: none;
      }
      &:hover .clear-icon {
        display: block;
      }
    }
    .accountsTable {
      .table-header {
        overflow: hidden;
        .title {
          float: left;
          font-family: OpenSans-Bold;
          font-size: 20px;
          color: rgba(0, 0, 0, 0.60);
          line-height: 40px;
        }
        .edit-box {
          display: flex;
          float: right;
          .remove, .moveTo, .add {
            margin-left: 8px;
            .el-button {
              font-size: 16px;
              color: #409EFF;
              padding: 11px 25px;
              border: 1px solid #409EFF;
              &:hover {
                background-color: #409EFF;
                color: #fff;
              }
              &:focus {
                color: #fff;
                background-color: #409EFF;
              }
            }
          }
          /*.remove {*/
          /*.el-button {*/
          /*font-size: 16px;*/
          /*color: #f56c6c;*/
          /*padding: 11px 25px;*/
          /*border: 1px solid #f56c6c;*/
          /*&:hover {*/
          /*background-color: #f56c6c;*/
          /*color: #fff;*/
          /*}*/
          /*&:focus {*/
          /*color: #fff;*/
          /*background-color: #f56c6c;*/
          /*}*/
          /*}*/
          /*}*/

        }
        .add-box {
          display: inline-block;
          cursor: pointer;
          border: 1px solid #55A6FB;
          margin-right: 20px;
          padding: 5px 8px;
          float: right;
          color: #55A6FB;
        }
      }
      .el-table {
        .el-table__body-wrapper {
          max-height: 400px;
        }
      }
      .accountsTableBox {
        margin-bottom: 10px;
        overflow: hidden;
        .block {
          margin-top: 10px;
          float: right;
        }
      }
    }
    .changeLog {
      position: relative;
      margin-top: 20px;
      margin-bottom: 10px;
      .header {
        height: 30px;
        position: relative;
        .titleBox {
          cursor: pointer;
          overflow: hidden;
          width: 150px;
          height: 30px;
          .title {
            float: left;
            font-family: OpenSans-Bold;
            font-size: 20px;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.60);
          }
          i {
            position: absolute;
            top: 9px;
            margin-left: 4px;
            color: #108EE9;
          }
        }
        .pinBox {
          position: absolute;
          right: 10px;
          cursor: pointer;
          top: 50%;
          .iconfont {
            color: #108EE9;
            font-size: 20px;
          }

        }
        .add-box {
          display: inline-block;
          cursor: pointer;
          border: 1px solid #55A6FB;
          margin-right: 20px;
          padding: 5px 8px;
          float: right;
          color: #55A6FB;
        }
      }
      .changeLogBox {
        /*height: 60vh;*/
        /*overflow-y: auto;*/
        .changelogTable {
          .ag-theme-balham {
            .cell-span {
              background: white;
              border-left: 1px solid lightgrey !important;
              border-right: 1px solid lightgrey !important;
              border-bottom: 1px solid lightgrey !important;
            }
          }
        }
        .table-header {
          top: 0;
          .item {
            text-align: center;
            padding: 10px 0;
            border: 1px solid #ccc;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.65);
            line-height: 18px;
          }
        }
        .table-content {
          background: white;
          /*max-height: 80vh;*/
          /*overflow-y: auto;*/
          .item {
            text-align: center;
            padding: 10px 0;
            border: 1px solid #ccc;
            border-top: none;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.65);
            line-height: 18px;
          }
        }
      }
    }
    .confirm-box {
      margin: 20vh auto 0;
      display: block;
      position: fixed;
      left: 50%;
      z-index: 999;
      transform: translate(-50%, -50%);
      width: 250px;
      height: 100px;
      border: 1px solid #A7E1C4;
      background: #EBF8F2;
      opacity: 0.9;
      text-align: center;
      i {
        font-size: 30px;
        color: #3DBD7D;
        margin-top: 25px;
      }
      p {
        font-size: 13px;
        margin: 10px 0;
      }
    }
    .removeDetail-outer {
      .removeDetailTableBox {
        height: 35vh;
      }
    }
    .success-box {
      margin: 20vh auto 0;
      display: block;
      position: fixed;
      left: 50%;
      z-index: 999;
      transform: translate(-50%, -50%);
      width: 250px;
      height: 100px;
      border: 1px solid #A7E1C4;
      background: #EBF8F2;
      opacity: 0.9;
      text-align: center;
      i {
        font-size: 30px;
        color: #3DBD7D;
        margin-top: 25px;
      }
      p {
        font-size: 13px;
        margin: 10px 0;
      }
    }
    .warning-box {
      margin: 20vh auto 0;
      padding: 0 10px 10px;
      display: block;
      position: fixed;
      left: 50%;
      z-index: 999;
      transform: translate(-50%, -50%);
      width: 250px;
      height: 100px;
      border: 1px solid #FFBF00;
      background: #FFFAEB;
      opacity: 0.9;
      text-align: center;
      i {
        font-size: 30px;
        color: #FFBF00;
        margin-top: 25px;
      }
      p {
        font-size: 13px;
        margin: 6px 0;
      }
    }
    .confirm-leave-active, .warning-leave-active {
      transition: all 1s;
    }
    .confirm-leave, .warning-leave {
      opacity: .9;
    }
    .confirm-leave-to, .warning-leave-to {
      opacity: 0;
    }

  }

</style>
<style lang="scss">
  .ag-theme-balham .ag-row-even {
    background-color: unset;
  }

  .ag-theme-balham .ag-row-odd {
    background-color: unset;
  }

  .changeLogBox {
    .changelogTable {
      .ag-theme-balham {
        .cell-span {
          background: white;
          border-left: 1px solid lightgrey !important;
          border-right: 1px solid lightgrey !important;
          border-bottom: 1px solid lightgrey !important;
        }
      }
    }
  }
</style>
